<template>
	<!-- 标签 -->
	<div>
		<HEADER></HEADER>
		<div class="container">
			<div class="columns">
				<div class="mine-columns">

					<div class="card pageHead">
						<h1>
							标签 <p>共计 {{dataList.length}} 个标签</p>
						</h1>
					</div>
					<div class="card">
						<div class="labeList">
							<div class="item" @click="chooseLabel(item.tags)" v-for="(item,index) in dataList" :key="index">
								{{item.tags}}
							</div>
						</div>
					</div>

				</div>
				<LeftView @buttClassfy="buttClassfy" @buttLable="buttLable"></LeftView>
				<RighthView @buttArticle="buttArticle" @buttArchive="buttArchive"></RighthView>
			</div>
		</div>
		<Gotop></Gotop><FOOTER></FOOTER>
	</div>
</template>

<script>
	import {} from '../assets/font/iconfont.js'
	import HEADER from '../components/header.vue'
	import FOOTER from '../components/footer.vue'
	import LeftView from '../components/leftView.vue'
	import RighthView from '../components/righthView.vue'
	import Gotop from '../components/gotop.vue'
	export default {
		name: 'Label',
		data() {
			return {
				dataList:[],
			}
		},
		mounted(){this.getIndexArticle();},
		methods: {
			// 请求
			getIndexArticle(){
				this.$axios.post(this.HOST + '/api/indexPage').then(res => {
					let data = res.data.data;
					for(let i=0;i<data.length;i++) {
						data[i].date = data[i].datetime.slice(0,10);
					}
					this.dataProces(data)
				}).catch(err => {
					console.log(err, ' catch ')
				})
			},
			// 数据处理
			dataProces(e){
				let map = {};
				for (let i=0; i<e.length;i++) {
					if (!map[e[i].tags]) {
						this.dataList.push({
							tags: e[i].tags
						});
						map[e[i].tags] = e[i]
					} 
				}
				// console.log(this.dataList,"this.dataList") 
			},
			// 跳转至ArrayItem
			chooseLabel(e) {
				console.log('跳转',e)
				this.$router.push({
					path: "/ArrayItem",
					query: {
						arr:{name:'标签',lable:e,}
					}
				});
			},
			// 分类
			buttClassfy(e){
				console.log(e,'1')
				this.$router.push({
					path:'/ArrayItem',
					query:{arr:e}
				})
			},
			// 标签
			buttLable(e){
				console.log(e,'2')
				this.$router.push({
					path:'/ArrayItem',
					query:{arr:e}
				})
			},
			// 最近文章
			buttArticle(e){
				console.log(e.ArtID,'3')
				this.$router.push({
					path:'/Article',
					query:{ArtID:e.ArtID},
				})
			},
			// 归档
			buttArchive(e){
				console.log(e,'4')
				this.$router.push({
					path:'/ArrayItem',
					query:{arr:e}
				})
			},
		},
		components: {
			HEADER: HEADER,
			FOOTER: FOOTER,
			LeftView: LeftView,
			RighthView: RighthView,
			Gotop: Gotop
		},
	}
</script>

<style>


</style>
